<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.layout {
			font-size: 20px;
		}

		.search {
			width: 1400px;
			margin: 0 auto;
		}

		.search button {
			font-size: 20px;
			height: 30px;
			vertical-align: middle;
		}

		.search input {
			height: 30px;
			vertical-align: middle;
			box-sizing: border-box;
		}

		.info {
			width: 1400px;
			margin: 30px auto 0;
		}

		.info table {
			width: 1000px;
			border: 1px solid #ccc;
			border-collapse: collapse;
		}

		.info table th,
		.info table td {
			border: 1px solid #ccc;
			text-align: center;
			height: 40px;
		}
	</style>
</head>

<body>
	<div class="layout">
		<!-- 搜索框 -->
		<div class="search">
			<span>价格查询:</span>
			<input type="text" class="min_price">-<input type="text" class="max_price">
			<button class="btn_price">搜索</button>


			<span style="margin-left: 80px;">按照商品名称查询:</span>
			<input type="text" class="txt_product">
			<button class="btn_product">搜索</button>
		</div>

		<!-- 展示商品数据 -->
		<div class="info" style="display: none;">
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>产品名称</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody class="table_body">
					<!-- 动态渲染 -->
				</tbody>
			</table>
		</div>
	</div>


	<script src="./data.js"></script>
	<script>
		// 输入两个价格，在两个价格之间进行查找，并输出对应的商品
		// 要求：
		// 根据价格区间搜索商品 [min , max]
		// 根据商品名称搜索商品

		// 思考：
		// 页面结构如何布局排版
		// 需要控制页面的哪些元素
		// 如何通过点击“搜索”按钮获取输入框的值
		// 如果从data数组中找出符合条件的数据

		// console.log(data);

		// 编码：
		// 步骤：
		// 1. 获取页面相关元素
		// 2. 事件绑定
		// 3. 编写程序的处理逻辑


		// 1.0 获取页面相关元素
		var minPrice = document.querySelector(".min_price");
		var maxPrice = document.querySelector(".max_price");
		var btnPrice = document.querySelector(".btn_price");

		var txtProduct = document.querySelector(".txt_product");
		var btnProduct = document.querySelector(".btn_product");

		var info = document.querySelector(".info");
		var tableBody = document.querySelector(".table_body");


		// 2.0 事件绑定
		// 按照商品价格搜索
		btnPrice.onclick = function () {
			// 获取输入框的值
			var v1 = minPrice.value;
			var v2 = maxPrice.value;
			// 判断输入没有输入值
			if (v1.length == 0 || v2.length == 0) {
				alert("输入框不能为空！")
				// 终止代码
				return;
			}
			// console.log(v1,v2);
			// 在data数组中找出符合条件的数据 
			// 定义空数组，把符合条件的数据添加到数组中
			// 数组：数组是可以储存一系列数据的集合。
			var arr = [];
			// 循环data数组
			for (var i = 0; i < data.length; i++) {
				// 判断
				if (Number(data[i].price) > v1 && Number(data[i].price) <= v2) {
					// 添加数据
					arr.push(data[i]);
				}
			}
			// 渲染数据 arr
			// console.log(arr);
			template(arr);
			// minPrice.value = "";
			// maxPrice.value = "";
		}

		// 按照商品迷名称搜索
		btnProduct.onclick = function () {
			// 获取输入的值
			var v3 = txtProduct.value;
			// 判断输入没有输入值
			if (v3.length == 0) {
				alert("输入框不能为空！")
				// 终止代码
				return;
			}
			// 定义空数组
			var arr = [];
			// 循环data数组
			for (var i = 0; i < data.length; i++) {
				if (data[i].name.indexOf(v3)!=-1) {
					// 添加符合条件的数据
					arr.push(data[i]);
				}
			}
			// 渲染数据
			template(arr);
			// txtProduct.value = "";
		}


		// 编写函数 ，渲染字符串
		function template(array) {
			// 判断数组的length属性是否为0
			if (array.length == 0) {
				// 终止代码
				return;
			}
			// 显示表格
			info.style["display"] = "block";
			// 字符串拼接
			var str = '';
			// 循环array数组
			for (var i = 0; i < array.length; i++) {
				str += '<tr>'
				str += '	<td>' + array[i].id + '</td>'
				str += '	<td>' + array[i].name + '</td>'
				str += '	<td>' + array[i].price + '￥</td>'
				str += '</tr>'
			}
			//把拼接完成的字符串表现出来
			tableBody.innerHTML = str;
		}

	</script>
</body>

</html>